<template>
	<view class="content_box">
		<header-box :title="'执行部工作流程'"></header-box>

		<view class="w546 h155 bgc-imag">
		</view>
		<view class="center-top pt80 r20">
			<view class="img">
				<image class="w120 h120 r60 " src="../../static/VIP_tu.png" mode=""></image>
				<view class="">
					玛卡巴卡
				</view>
				<view class="center">
					负责人
				</view>
			</view>

			<view class="tab-list flex">
				<view class="w190">庆典公司名称：</view><text style="color: #232323;">玛卡巴卡的公园哇唧唧哇</text>
			</view>
			<view class="tab-list flex">
				<view class="w190">活动日期：</view><text style="color: #232323;">2021.06.01 12:30</text>
			</view>
			<view class="tab-list flex">
				<view class="w190">
					活动地址：
				</view><text style="color: #232323;">四川省成都市金牛区万达广场</text>
			</view>
			<view class="tab-list flex">
				<view class="w190">
					活动类型：
				</view><text style="color: #232323;">舞会</text>
			</view>
			<view class="tab-list1 flex">
				<view class="w190">
					进场时间：
				</view><text style="color: #232323;">2021.06.01 11:30</text>
			</view>
		</view>

		<view class="w546 h155 bgc-imag1">
		</view>

		<view class="center-top1 pt80 r20">
			<view class="tab-list flex">
				<view class="w190">
					联系人：
				</view><text style="color: #232323;">哈哈哈嗝</text>
			</view>
			<view class="tab-list flex align-center justify-between">
				<view class="flex align-center">
					<view class="w190">
						联系人电话：
					</view>
					<text style="color: #232323;">18989652301</text>
				</view>
				<view class="" @tap="phone('1111')"><text class="cuIcon-copy mr10"></text> 复制</view>
			</view>

			<view class="tab-list flex align-center justify-between">
				<view class="">
					参与人员：
					<view class="cu-avatar-image cu-avatar-group">
						<view class="cu-avatar round lg bgc" v-for="(item,index) in 5" :key="index"
							 :style="[{ backgroundImage:'url(' + item.avatar + ')'}]">
						</view>
					</view>
				</view>
				<view class="">
					<text class="cuIcon-right"></text>
				</view>
			</view>

			<view class="tab-list1 flex align-center">

				<view class="" style=" width: 210rpx;">
					设备：
				</view>

				<view class="flex flex-wrap">
					<text class="cu-tag bg-red light r10 f-1  mt26 " v-for="(item,index) in 12" :key="index">互通</text>
				</view>
			</view>
		</view>

		<view class="ww100 mt47 flex justify-center align-center">
			<view class="w54 h3" style="border-top: 5rpx solid #BCAFFF;">
			</view>
			<view class="ml20 mr20" style="color: #FFFFFF; font-size: 40rpx; font-weight: 400;">
				管理人员
			</view>
			<view class="w54 h3" style="border-top: 5rpx solid #BCAFFF;">
			</view>
		</view>

		<view class="text-center mt44 flex justify-around">
			<view v-for="(item,index) in 4" :key="index">
				<view class="">
					<image class="w110 h110 bg-brown r55" src="../../static/Home.png" mode=""></image>
					<view class="">
						画画的北...
					</view>
				</view>
			</view>
		</view>

		<view class="flex justify-center" @click="$tools.to('/pages/flow/filltab')">
			<button type="default" class="w686 btn h98 text-center r49 cu-btn">
				填写流程
			</button>
		</view>
		
		<yy-home></yy-home>
		
		<!-- 加载提示 -->
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<!-- 信息提示-->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arrList: [],
			};
		},
		onShow() {},
		onLoad(e) {
			// var id = uni.getStorageSync('userId')
			
			// this.getStockList(id)
		},
		methods: {
			clkOn() {
				this.z.load(this);
				setTimeout(() => {
					this.z.load(this, 0);
				}, 3000);
			},
			phone(num) {
				this.$tools.copy(num)
			},
			
			// // 列表
			// async getStockList(id) {
			// 	const res = await this.$u.post("api/process/flow_find?id=" + id) //   uni.getStorageSync('uid')
			// 	this.arrList = res.data
			// 	console.log('this.arrList==>',this.arrList );
			// },
		}
	};
</script>

<style lang="scss" scoped>
	.content_box {
		width: 100%;
		height: 2292rpx;
		position: relative;
		background-color: #9885F8;

		.bgc-imag {
			position: absolute;
			left: 10%;
			top: 8%;
			background-size: 100%;
			background-repeat: no-repeat;
			background-image: url('https://w-jinxiao.oss-cn-chengdu.aliyuncs.com/20210322/142.png');
		}

		.bgc-imag1 {
			position: absolute;
			left: 10%;
			top: 1055rpx;
			background-size: 100%;
			background-repeat: no-repeat;
			background-image: url('https://w-jinxiao.oss-cn-chengdu.aliyuncs.com/20210322/142.png');
		}

		.center-top {
			width: 706rpx;
			height: 860rpx;
			margin: 104rpx auto 0;
			background-color: #FFFFFF;

			.img {
				text-align: center;
				margin: -10rpx auto 30rpx;

				.center {
					width: 110rpx;
					// height: 38rpx;
					margin: 14rpx auto;
					color: #FFFFFF;
					text-align: center;
					line-height: 38rpx;
					border-radius: 19rpx;
					font-size: 24rpx;
					background-color: #FF9F42;
				}
			}

			.tab-list {
				width: 92%;
				height: 98rpx;
				line-height: 98rpx;
				margin: 0 auto;
				color: #999999;
				padding-bottom: 32rpx;
				border-bottom: 1rpx solid #F7F7F7;

			}

			.tab-list1 {
				width: 92%;
				height: 98rpx;
				line-height: 98rpx;
				margin: 0 auto;
				color: #999999;
				padding-bottom: 32rpx;
			}
		}

		.center-top1 {
			width: 706rpx;
			// height: 562rpx;
			margin: 38rpx auto 0;
			background-color: #FFFFFF;

			.tab-list {
				width: 92%;
				height: 120rpx;
				line-height: 120rpx;
				margin: 0 auto;
				color: #999999;
				border-bottom: 1rpx solid #F7F7F7;

				.cu-avatar-image {}
			}

			.tab-list1 {
				width: 92%;
				margin: 0 auto;
				color: #999999;
				padding-bottom: 32rpx;
			}
		}

		.btn {
			color: #A18710;
			margin-top: 87rpx;
			background-color: #FFE985;
		}
	}
</style>